<!DOCTYPE html>

<html class="no-js">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title></title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://cdn.staticfile.org/axios/0.19.0-beta.1/axios.js"></script>
    <script src="https://cdn.staticfile.org/vue/2.5.17/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jsplumb@2.9.2/dist/js/jsplumb.min.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.13.0/theme-chalk/index.css" />
    <script src="https://cdn.staticfile.org/element-ui/2.13.0/index.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/animate.css/3.7.0/animate.min.css" />
    <link rel="stylesheet" href="../../../lib/index.css" />
    <script src="../../../lib/bee.js"></script>
</head>

<body>
    <div id="app">
        <bee-high-timeline :flow-data="activityData" skin="pithy" :flow-props="flowLineProps" :flow-color="flowColor"></bee-high-timeline>
        <br>
        <br>
        <br>
        <bee-high-timeline :flow-data="activityData" skin="rich" :flow-props="flowLineProps" :flow-color="flowColor"></bee-high-timeline>
        <br>
        <br>
        <bee-high-timeline :flow-data="activityInfoData" skin="info" :flow-props="flowLineProps">
            <template slot="other" slot-scope="scope">
                <div>
                    <i
                        @click="handelDetails(scope)"
                        title="查看详情"
                        class="el-icon-tickets link-pointer"
                        style="color: #1890FF;margin-right: 20px"
                    >
                    </i>
                    <i
                        @click="handleEdit(scope)"
                        title="编辑详情"
                        class="el-icon-edit link-pointer"
                        style="color: #1890FF;"
                    >
                    </i>
                </div>
            </template>
        </bee-high-timeline>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                activityInfoData: [
                    {
                        endTime: '2010-12-08',
                        startTime: '2010-10-08',
                        mainText: "金融学",
                        statusMainText: "全日制",
                        otherMainText: "本科",
                        subMainText: "广东金金融学院",
                        subStatusMainText: "本科",
                    },
                    {
                        endTime: '2010-12-08',
                        startTime: '2010-10-08',
                        mainText: "法学",
                        statusMainText: "全日制",
                        otherMainText: "本科",
                        subMainText: "中国法律大学",
                        subStatusMainText: "本科",
                    },
                ],
                activityData: [
                    {
                        status: 'APPROVAL',
                        statusText: '待审批',
                        tenantDepartmentName: '部门名称',
                        tenantName: '',
                        comment: '详情详情请查详情请查',
                        name: '',
                        assigneeName: '马云',
                        endTime: '2020-10-10',
                        statusFlag: '启动',
                        flowId: '9900088773',
                        flowTxt: '转正流程',
                        subFlowTxt: '自评',
                        startTime: '2010-10-08'
                    },
                    {
                        status: 'TURN_TO_DO',
                        statusText: '通过',
                        tenantDepartmentName: '人力资源部',
                        tenantName: '李响1',
                        comment: '',
                        name: '',
                        assigneeName: '马云',
                        endTime: '2020-10-10',
                        statusFlag: '转办',
                    },
                    {
                        status: 'PASSED',
                        statusText: '通过',
                        tenantDepartmentName: '人力资源部',
                        tenantName: '李响',
                        comment: '',
                        name: '',
                        assigneeName: '马云',
                        endTime: '2020-10-10',
                        statusFlag: '沟通',

                        subTask: [
                            {
                                status: 'COMMUNICATION',
                                statusText: '沟通',
                                tenantDepartmentName: '人力资源部',
                                tenantName: '李连杰',
                                comment: '沟通沟通沟通沟通沟通沟通沟通沟通',
                                name: '',
                                assigneeName: '马云马云马云',
                                endTime: '2020-10-10',
                            }
                        ]
                    }
                ], // 流程信息
                flowLineProps: {
                    status: 'status',
                    statusText: 'statusText',
                    department: 'tenantDepartmentName',
                    info: 'comment',
                    post: 'name',
                    time: 'endTime',
                    tenant: 'tenantName',
                    assignee: 'assigneeName',
                    subTask: 'subTask',
                    flowText: 'flowTxt',
                    subFlowText: 'subFlowTxt',
                },
                flowColor: {
                    'SUBMITTED': '#1890FF',
                    'APPROVAL': '#000000',
                    'COMMUNICATION': '#29AFB8',
                    'REPLY': '#1890FF',
                    'WAIT_REPLY': '#FAAD14',
                    'CANCEL_COMMUNICATION': '#F5222D',
                    'TODO': '#8C8C8C',
                    'WITHDRAW': '#F5222D',
                    'PASSED': '#52C41A',
                    'TURN_TO_DO': '#1890FF',
                    'INVALID': '#F5222D',
                    'ABANDONED': '#F5222D'
                }
            }
        },
        computed: {
        },
        mounted() {
        },
        methods: {
            handelDetails(row) {
                console.log(row)
            },
            handleEdit(row) {
                console.log(row)
            }
        }
    })
</script>

</html>